<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title">
                    <span>条码成本</span>
                </h3>
            </div>
            <div class="col-xs-6 text-right"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="row">
            <div class="col-lg-3">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <form class="horizontal-form" autocomplete="off">
                            <div class="m-form m-form--label-align-right">
                                <div class="row align-items-center m--margin-bottom-10">
                                    <div class="col-xl-12">
                                        <div class="form-group m-form__group align-items-center">
                                            <div class="input-group">
                                                <input
                                                    [(ngModel)]="filterText"
                                                    name="batchId"
                                                    autoFocus
                                                    class="form-control m-input"
                                                    [placeholder]="l('SearchWithThreeDot')"
                                                    type="text"
                                                />
                                                <span class="input-group-btn">
                                                    <button (click)="getCost()" class="btn btn-primary" type="submit">
                                                        <i
                                                            class="flaticon-search-1"
                                                            [attr.aria-label]="l('Search')"
                                                        ></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr />
                        <div class="row align-items-center" style="margin: 0;">
                            <div class="col-12 task-table">
                                <table width="100%">
                                    <tr style="height: 50px;">
                                        <td width="30%" style="text-align: right;">条码号：</td>
                                        <td>
                                            <i>{{ batch.id }}</i>
                                        </td>
                                    </tr>
                                    <tr style="height: 50px;">
                                        <td style="text-align: right;">条码数量：</td>
                                        <td>
                                            <i>{{ batch.quantity }}</i>
                                        </td>
                                    </tr>

                                    <tr style="height: 50px;">
                                        <td style="text-align: right;">任务号：</td>
                                        <td>
                                            <i>
                                                {{ batch.task?.taskNum }}
                                            </i>
                                        </td>
                                    </tr>
                                    <tr style="height: 50px;">
                                        <td style="text-align: right;">图号：</td>
                                        <td>
                                            <i>{{ batch.task?.productId }}</i>
                                        </td>
                                    </tr>
                                    <tr style="height: 50px;">
                                        <td style="text-align: right;">产品名称：</td>
                                        <td>
                                            <i>{{ batch.task?.productName }}</i>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-12" style="text-align: right">
                                <button
                                    type="button"
                                    class="btn btn-primary"
                                    (click)="realtimeCostDetailModal.show(cost.batchId, undefined)"
                                >
                                    详细数据
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body" style="padding-left: 0;">
                        <div class="row">
                            <div class="col-12">
                                <div class="m-widget14" style="padding: 0;">
                                    <div class="m-widget14__chart" style="height:250px; padding: 0;">
                                        <ngx-charts-advanced-pie-chart
                                            [results]="typeCosts"
                                            scheme="picnic"
                                            label="总计"
                                        >
                                        </ngx-charts-advanced-pie-chart>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table
                                [value]="detailCosts"
                                rows="10"
                                [paginator]="false"
                                [lazy]="false"
                                [responsive]="primengTableHelper.isResponsive"
                            >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width:160px">
                                            条码
                                        </th>
                                        <th style="width:80px">
                                            车间
                                        </th>
                                        <th style="width:60px">
                                            工序号
                                        </th>
                                        <th style="width:100px">
                                            工序名称
                                        </th>
                                        <th style="width:80px">
                                            类型
                                        </th>
                                        <th style="width:80px">
                                            项目
                                        </th>
                                        <th style="width:80px">
                                            时间
                                        </th>
                                        <th style="width:80px">
                                            成本
                                        </th>
                                        <th style="width:160px">
                                            公式
                                        </th>

                                        <th style="width:100px">
                                            备注
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr
                                        [ngClass]="{
                                            'tr-dark': record.processSequence % 2 === 1,
                                            'tr-light': record.processSequence % 2 === 0
                                        }"
                                    >
                                        <td>
                                            {{ record.batchId }}
                                        </td>
                                        <td>
                                            {{ record.workshop }}
                                        </td>
                                        <td>
                                            {{ record.processSequence }}
                                        </td>
                                        <td>
                                            {{ record.processName }}
                                        </td>
                                        <td>
                                            {{ record.category }}
                                        </td>
                                        <td>
                                            {{ record.type }}
                                        </td>
                                        <td>
                                            {{ record.time | momentFormat: "YYYY-MM-DD HH:mm" }}
                                        </td>
                                        <td>
                                            {{ record.amount | number: "1.2-2" }}
                                        </td>
                                        <td>
                                            {{ record.formula }}
                                        </td>
                                        <td>
                                            {{ record.remark }}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <realtimeCostDetailModal #realtimeCostDetailModal></realtimeCostDetailModal>
</div>
